import React from 'react';
import {
  Form,
  Input,
  Button,
  message
} from 'antd';
import './common.css'
const { TextArea } = Input;

const inputProps = {
  placeholder: 'Please input the sequence bases',
  autoSize: { minRows: 4, maxRows: 10 }
}

const flexStyle = {
  display: 'flex',
  alignItems: 'flex-end',
  justifyContent: 'flex-end'
}

function IpnutTextarea (props) {
  const [form] = Form.useForm();
  const [sequenceTitle, setSequenceTitle] = React.useState('')
  const [sequenceContent, setSequenceContent] = React.useState('')

  const onFinish = (values) => {
    if (window.Avue) { // 调用接口上传
      window.Avue.v_pasteSeqTextPost(values)
    } else {
      props.setSeqItem({
        desc: '私人的',
        title: values.sequenceTitle + '.gb',
        id: Date.now().toString()
      })
      message.success('success')
    }
    form.resetFields(); // 清空
  };
  const onFinishFailed = (errorInfo) => {
    message.warning('Please enter the content correctly！')
  };

  const sequenceCheck = (_, value) => {
    const e = value.toUpperCase()
    if (!e) {
      return Promise.reject(new Error('Bases Content Can Not Be Blank！'))
    }
    let r, errorText
    if (props.componentType === 'PROTEIN' || props.componentType === 'prtein') {
      r = /^[ABCDEFGHIKLMNPQRSTVWXYZ]+$/
      errorText = '仅支持包含ABCDEFGHIKLMNPQRSTVWXYZ的蛋白序列'
    } else {
      r = /^[ATCG]+$/
      errorText = '仅支持包含ATCG的核酸序列'
    }
    if (r.test(e)) {
      return Promise.resolve()
    } else {
      return Promise.reject(new Error(errorText))
    }
  }

  const sequenceContentOnChange = (e) => {
    const value = e?.target?.value?.toUpperCase()
    setSequenceContent(value)
  }

  return (
    <div style={{ textAlign: 'left' }}>
      <Form
        form={form}
        layout="vertical"
        name="sequenceForm"
        initialValues={{ remember: true, }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item
          label={<label style={{ color: props.darkMode ? '#afb6bc' : '#444' }}>Name</label>}
          name="sequenceTitle"
          rules={[
            {
              required: true,
              message: 'Name Can Not Be Blank!',
            },
          ]}
          style={{ color: props.darkMode ? '#afb6bc' : '#444' }}
        >
          <Input placeholder="Enter Bases Name"
            value={sequenceTitle}
            onChange={({ target: { value } }) => setSequenceTitle(value)}
            style={{ width: '100%', background: props.darkMode ? 'transparent' : '#fff', color: props.darkMode ? '#afb6bc' : '#444' }}
          />
        </Form.Item>
        <Form.Item
          label={<label style={{ color: props.darkMode ? '#afb6bc' : '#444' }}>Bases</label>}
          name="sequenceContent"
          normalize={v => v?.toUpperCase()}
          rules={[
            {
              required: true,
              validator: sequenceCheck
            },
          ]}>
          <TextArea {...inputProps}
            onChange={sequenceContentOnChange}
            value={sequenceContent}
            style={{ width: '100%', background: props.darkMode ? 'transparent' : '#fff', color: props.darkMode ? '#afb6bc' : '#444' }}
          />
        </Form.Item>
        <div style={flexStyle}>
          <Button className="ove-bp3-button ove-bp3-intent-primary"
            type="primary"
            htmlType="submit"
            style={{ background: '#137cbd' }}>
            <span className="bp3-button-text">Add</span>
          </Button>
        </div>
      </Form>
    </div >
  );
};

export default IpnutTextarea;